<script setup lang="ts">
import mapConfigObj from '@/js/mapConfig.ts'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/home'

const store = useHomeStore()
const { mapId } = storeToRefs(store)
mapId.value ??= "gw"
const mapConfig = ref(mapConfigObj[mapId.value])
const bgImage = ref()
console.log("🚀 ~ bgImage:", bgImage)

</script>

<template>
  <div class="filter-header">
    <div class="header-icon" :class="mapId"></div>
    <div class="header-name">{{ mapConfig.mainland }}</div>
    <!-- <div class="switch-btn">
      <div class="switch-icon"></div>
      <div class="switch-text">切换</div>
    </div> -->
  </div>
</template>

<style lang="less" scoped>
.filter-header {
  display: flex;
  align-items: center;
  color: #d3bc8e;
  padding: 12px 7px 7px 10px;

  .header-icon {
    width: 40px;
    height: 40px;
    background-size: cover;
    margin-right: 5px;
    // background-image: url('../assets/images/ui/xumi-icon.png')
  }

  .ys {
    background-image: url('../assets/images/ui/ys-icon.png')
  }

  .gw2 {
    background-image: url('../assets/images/ui/gw2-icon.png')
  }

  .header-name {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
  }

  .switch-btn {
    display: flex;
    align-items: center;
    padding-right: 8px;
    padding-left: 4px;
    background-color: #4a5366;
    border-radius: 12px;

    .switch-icon {
      margin-right: 5px;
      width: 16px;
      height: 16px;
      background-size: cover;
      background-image: url('../assets/images/ui/switch-btn.png');
    }

    .switch-text {
      font-size: 12px;
    }
  }
}
</style>
